import React, { Component } from 'react';
import { connect } from 'react-redux';
import Mock from 'mockjs';
import axios from 'axios';
import './screen.scss';

Mock.mock('/getstyle/', {
    data: [
        { "title": '风格', "content": [{ msg: "客餐厅", key: 1 }, { msg: "背景墙", key: 2 }, { msg: "卧室", key: 3 }, { msg: "榻榻米", key: 4 }, { msg: "儿童房", key: 5 }, { msg: "木门", key: 6 }] },
        { "title": '功能', "content": [{ msg: "客餐厅", key: 1 }, { msg: "背景墙", key: 2 }, { msg: "卧室", key: 3 }, { msg: "榻榻米", key: 4 }, { msg: "儿童房", key: 5 }, { msg: "木门", key: 6 }] },
        { "title": '面积', "content": [{ msg: "客餐厅", key: 1 }, { msg: "背景墙", key: 2 }, { msg: "卧室", key: 3 }, { msg: "榻榻米", key: 4 }, { msg: "儿童房", key: 5 }, { msg: "木门", key: 6 }] },
        { "title": '价格', "content": [{ msg: "客餐厅", key: 1 }, { msg: "背景墙", key: 2 }, { msg: "卧室", key: 3 }, { msg: "榻榻米", key: 4 }, { msg: "儿童房", key: 5 }, { msg: "木门", key: 6 }] }
    ]
})

class Screen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: '',
            key: null,
            data: [{ 'title': '', 'content': [] }]
        }
        this.onBack.bind(this);
    }

    onBack = () => {
        this.props.history.goBack();
    }

    componentWillMount() {
        axios.get('/getstyle/').then(res => {
            this.setState({
                data: res.data.data
            });
        });
    }

    onClick(e) {
        this.setState({
            value: e.target.innerHTML,
            key: e.target.getAttribute('data-key')
        })
    }



    render() {
        return (
            <div className="screen">
                <div className="screen_input pr">
                    <input type="text" placeholder="筛选" data-key={this.state.key} value={this.state.value} onChange={this.onClick.bind(this)} />
                    <span onClick={this.onBack}>X</span>
                </div>
                {
                    this.state.data && this.state.data.map((item, key) =>
                        <div className="screen_msg" key={key}>
                            <h3>{item.title}</h3>
                            <ul>
                                {item.content.map((num, index) =>
                                    <li key={index} data-key={num.key} onClick={this.onClick.bind(this)}>{num.msg}</li>
                                )}
                            </ul>
                        </div>
                    )
                }
                <div className="screen_btn" onClick={this.onClick.bind(this)}>查看结果</div>
            </div>
        )
    }
}

export default connect()(Screen);